<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <el-tabs v-model="activeName">
          <el-tab-pane label="角色管理" name="first">
            <el-button type="primary" size="medium" icon="el-icon-plus" @click="showRoleDialog=true">新增角色</el-button>
            <el-table
              :data="tableData"
              border
              style="width: 100%;margin-top: 20px">
              <el-table-column
                type="index"
                label="序号"
                width="100"
                align="center">
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="角色"
                width="180"/>
              <el-table-column
                prop="description"
                label="描述"/>
              <el-table-column
                label="操作"
                align="center"
                width="300px">
                <template slot-scope="{row}">
                  <el-button type="success" size="medium" @click="assignRole(row.id)">权限管理</el-button>
                  <el-button type="primary" size="medium" @click="editRole(row.id)">编辑</el-button>
                  <el-button type="danger" size="medium" @click="delRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row type="flex" style="margin-top: 20px" justify="end">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.pagesize"
                @current-change="handleCurrentChange">
              </el-pagination>
            </el-row>

          </el-tab-pane>
          <el-tab-pane label="公司信息" name="second">

            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />

            <el-form ref="form" :model="companyForm" label-width="120px" style="margin-top: 20px">
              <el-form-item label="公司名称">
                <el-input v-model="companyForm.name" style="width:400px" disabled></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="companyForm.companyAddress" style="width:400px" disabled></el-input>
              </el-form-item>
              <el-form-item label="公司邮箱">
                <el-input v-model="companyForm.mailbox" style="width:400px" disabled></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="companyForm.remarks" type="textarea" style="width:400px" :rows="3"
                          disabled></el-input>
              </el-form-item>
            </el-form>

          </el-tab-pane>
        </el-tabs>
        <add-role ref="addRole" :showDialog.sync="showRoleDialog" @addRole="getRoleList"/>
        <assign-role ref="updateRole" :showDialog.sync="showPermDialog"/>
      </el-card>
    </div>
  </div>
</template>

<script>
  import {getRoleList, getCompanyInfo, deleteRole} from "@/api/setting";
  import AddRole from "@/views/setting/components/add-role";
  import AssignRole from "@/views/setting/components/assign-role";

  export default {
    components: {AssignRole, AddRole},
    data() {
      return {
        activeName: 'first',
        tableData: [],
        page: {
          total: 0,
          page: 1,
          pagesize: 10
        },
        companyForm: {},
        showRoleDialog: false,
        showPermDialog: false,
        roleId: null, // 记录当前点击分分配权限的角色id
      }
    },
    comments: {
      AddRole
    },
    created() {
      this.getRoleList()
      this.getCompanyInfo()
    },
    methods: {

      async getRoleList() {
        const {total, rows} = await getRoleList(this.page)
        this.tableData = rows
        this.page.total = total
      },
      handleCurrentChange(val) {
        this.page.page = val
        this.getRoleList()
      },
      async getCompanyInfo() {
        this.companyForm = await getCompanyInfo(this.$store.getters.companyId)
      },
      async editRole(id) {
        await this.$refs.addRole.getRoleDetail(id)
        this.showRoleDialog = true
      },
      delRole(id) {
        this.$confirm('确定要删除该角色吗').then(() => {
          return deleteRole(id)
        }).then(() => {
          this.getRoleList()
          this.$message.success('角色删除成功')
        }).catch(() => {

        })
      },
      async assignRole(id) {
        this.roleId = id
        await this.$refs.updateRole.getPermissionList(id)
        this.showPermDialog = true
      }


    }

  }
</script>

<style scoped>

</style>
